<template>
  <div class="home">
    <div class="top">
      <div class="tname">edmmss</div>
      <div class="signature">安之所选 淡然对待</div>
    </div>
    <div class="swiperBox">
      <swiper :thumbUrls="thumbUrls" />
    </div>
    <div class="navigationBarComponents">
      <navigationBar :navigations="navigations" />
    </div>

    <div class="articleBody">
      <div class="articles">
        <div class="article" v-for="(article,index) in articles" :key="index">
          <h2>
            <div class="articleTitle">{{article.articleTitle}}</div>
          </h2>
          <div class="authorAndAddTime">{{article.author}} | {{article.addTime}}</div>
          <div class="linkTop"></div>
          <div class="intro">{{article.intro}}</div>
        </div>
      </div>

      <div class="recentArticles">
        <h1 class="recentArticleH1">最近的文章</h1>
        <div class="article" v-for="(article,index) in recentArticles" :key="index">
          <div class="articleTitle">{{article.articleTitle}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from './swiper'
import navigationBar from './navigationBar'

export default {
  data () {
    return {
      navigations: [],
      thumbUrls: [],
      articles: [],
      recentArticles: []
    }
  },
  components: {
    swiper,
    navigationBar
  },
  methods: {},
  mounted () {
    setTimeout(() => {
      this.navigations = [
        {
          tname: '首页'
        },
        {
          tname: 'PHP'
        },
        {
          tname: 'MySQL'
        },
        {
          tname: 'Linux'
        }
      ]
      this.thumbUrls = [
        {
          image: 'http://blog-common-cdn.edmmss.top/AMCM6Yzsyn.jpg'
        },
        {
          image: 'http://blog-common-cdn.edmmss.top/QKwNZDr4C2.jpg'
        },
        {
          image: 'http://blog-common-cdn.edmmss.top/jtxbE6KrD7.jpg'
        }
      ]
      this.articles = [
        {
          articleId: 1,
          articleTitle: '测试题目',
          author: 'edmmss',
          addTime: '2020-5-25',
          intro:
            '年底程序监控是大户尽快发货时代峰峻看是大户复健科黄寺大街开发黄寺大街开发活动时间开发黄寺大街开发和就开始东方红就开始电话费就开始电话费加快速度和'
        },
        {
          articleId: 2,
          articleTitle: '测试题目2',
          author: 'edmmss',
          addTime: '2020-5-26',
          intro:
            '年底程序监控是大户尽快发货时代峰峻看是大户复健科黄寺大街开发黄寺大街开发活动时间开发黄寺大街开发和就开始东方红就开始电话费就开始电话费加快速度和'
        },
        {
          articleId: 3,
          articleTitle: '测试题目3',
          author: 'edmmss',
          addTime: '2020-5-26',
          intro:
            '年底程序监控是大户尽快发货时代峰峻看是大户复健科黄寺大街开发黄寺大街开发活动时间开发黄寺大街开发和就开始东方红就开始电话费就开始电话费加快速度和'
        }
      ]
      this.recentArticles = [
        {
          articleId: 1,
          articleTitle: '测试题目1'
        },
        {
          articleId: 1,
          articleTitle: '测试题目2'
        },
        {
          articleId: 1,
          articleTitle: '测试题目3'
        }
      ]
    }, 100)
  }
}
</script>

<style lang='less' scoped>
.home {
  .top {
    display: flex;
    align-items: center;
    z-index: 2;
    .tname {
      font-size: 40px;
      font-weight: bold;
      line-height: 1;
    }
    .swiperBox {
      z-index: 1;
      padding: 0 30px;
    }
    .signature {
      padding-top: 8px;
      margin-left: 20px;
    }
  }
  .navigationBarComponents {
    margin-top: 10px;
  }

  .articleBody {
    display: flex;
    .articles {
      width: 70%;
      .article {
        width: 100%;
        margin-top: 25px;
        margin-bottom: 25px;
        text-align: left;
        margin-left: 40px;
        .authorAndAddTime {
          font-size: 20px;
          color: #aaa;
          font-weight: 400;
        }
        .linkTop {
          width: 90%;
          height: 1px;
          border-top: solid #acc0d8 1px;
          margin-top: 20px;
        }
        .intro {
          width: 90%;
          margin-top: 20px;
        }
      }
    }
    .recentArticles {
      width: 30%;
      .recentArticleH1 {
        text-align: left;
        margin-top: 50px;
      }
      .article {
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
        .articleTitle {
          font-size: 20px;
          font-weight: bold;
          line-height: 1;
          text-align: left;
          margin-left: 25px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
